<template>
  <div class="exception">
    <div class="img">
      <img :src="config[type].img" alt="错误图片" />
    </div>
    <div class="content">
      <h1>{{ config[type].title }}</h1>
      <div class="desc">{{ config[type].desc }}</div>
      <div class="action" v-if="type != 403">
        <el-button type="primary" @click="handleToHome">返回首页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import types from "./type";

export default {
  name: "ExceptionPage",
  props: {
    type: {
      type: String,
      default: "404",
    },
  },
  data() {
    return {
      config: types,
    };
  },
  methods: {
    handleToHome() {
      this.$router.push({
        path: "/",
      });
      // this.$router.push({ name: this.$store.getters.permissionList[0].name })
    },
  },
};
</script>

<!--<style lang="scss" scoped>-->
<!--.exception {-->
<!--  display: flex;-->
<!--  //min-height: 500px;-->
<!--  height: 80%;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  text-align: center;-->
<!--  //margin-top: 150px;-->
<!--  .img {-->
<!--    display: inline-block;-->
<!--    padding-right: 52px;-->
<!--    zoom: 1;-->

<!--    img {-->
<!--      height: 360px;-->
<!--      max-width: 430px;-->
<!--    }-->
<!--  }-->

<!--  .content {-->
<!--    display: inline-block;-->
<!--    //flex: auto;-->
<!--    h1 {-->
<!--      color: #434e59;-->
<!--      font-size: 72px;-->
<!--      font-weight: 600;-->
<!--      line-height: 72px;-->
<!--      margin-bottom: 24px;-->
<!--    }-->

<!--    .desc {-->
<!--      color: rgba(0, 0, 0, 0.45);-->
<!--      font-size: 20px;-->
<!--      line-height: 28px;-->
<!--      margin-bottom: 16px;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.mobile {-->
<!--  .exception {-->
<!--    margin-top: 30px;-->

<!--    .img {-->
<!--      padding-right: unset;-->

<!--      img {-->
<!--        height: 40%;-->
<!--        max-width: 80%;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->
